---
title: Hero Video Dialog
date: 2024-10-05
description: A hero video dialog component.
author: nyxb
published: true
---

<ComponentPreview name="hero-video-dialog-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add hero-video-dialog
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hero-video-dialog" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Top-in-bottom-out

<ComponentPreview name="hero-video-dialog-demo-top-in-bottom-out" />

## Props

| Prop           | Type   | Description                      | Default           |
| -------------- | ------ | -------------------------------- | ----------------- |
| animationStyle | string | Animation style for the dialog   | "from-center"     |
| videoSrc       | string | URL of the video to be played    | -                 |
| thumbnailSrc   | string | URL of the thumbnail image       | -                 |
| thumbnailAlt   | string | Alt text for the thumbnail image | "Video thumbnail" |

## Animation Styles

The `animationStyle` prop accepts the following values:

- `"from-bottom"`: Dialog enters from the bottom and exits to the bottom
- `"from-center"`: Dialog scales up from the center and scales down to the center
- `"from-top"`: Dialog enters from the top and exits to the top
- `"from-left"`: Dialog enters from the left and exits to the left
- `"from-right"`: Dialog enters from the right and exits to the right
- `"fade"`: Dialog fades in and out
- `"top-in-bottom-out"`: Dialog enters from the top and exits to the bottom
- `"left-in-right-out"`: Dialog enters from the left and exits to the right

## Note

- If using a YouTube video, make sure to use the `embed` version of the video URL.
